<template>
  <div class="flex-col page">
    <div class="flex-col group">
      <div class="flex-col justify-start group_2">
        <div class="flex-col section">
          <div class="flex-row">
            <div class="flex-row flex-1 justify-start">
              <img @click="toBack" class="self-start image_2" style="margin: 0;" src="https://shops.cg500.com/static/yingguangbao-left-arrow-black.png" />
            </div>
            <div class="flex-row flex-1 justify-center">
              <span class="font text">红包</span>
            </div>
            <div class="flex-row flex-1 justify-center"></div>
          </div>
          <div class="flex-row equal-division group_3">
            <div class="flex-col items-center group_4 equal-division-item">
              <span class="font_2">{{ allPrice }}</span>
              <span class="font_3 mt-17">领取总金额</span>
            </div>
            <div class="horiz-divider section_4"></div>
            <div class="flex-col items-center group_4 equal-division-item">
              <span class="font_2">{{ jinPrice }}</span>
              <span class="font_3 mt-17">今日领取红包</span>
            </div>
          </div>
          <div class="flex-col section_2 mt-7-5">
            <div class="flex-col items-center self-stretch group_5">
              <div class="flex-row justify-around" style="width: 90%;">
                <div
                  v-for="(item, index) in tabsList"
                  @click="changeTabs(index)"
                  :key="index"
                  :class="currentTab == index ? 'active font text_2' : 'font_3 text_3'"
                  class="flex-row items-center justify-center"
                >
                  {{ item }}
                </div>
              </div>
              <!-- 红包列表 -->
              <div v-if="currentTab == 0" style="width: 100%;">
                <van-checkbox-group v-model="result" ref="checkboxGroup">
                  <div class="flex-row justify-between items-center section_9" v-for="(item, index) in hongbaoList" :key="index">
                    <van-checkbox :name="item.id" checked-color="#fa4936" :disabled="item.status != 0">
                      <div class="flex-row justify-between items-center" style="width: 100%;">
                        <div class="flex-row items-center">
                          <!-- <div v-if="item.status == 1">
                            <img class="self-start image_6" v-if="item.checked == false" src="https://shops.cg500.com/static/aijiu/long-unchecked1@2x.png" />
                            <img class="self-start image_6" v-if="item.checked == true" src="https://shops.cg500.com/static/aijiu/long-checked-red@2x.png" />
                          </div>
                          <div v-else>
                            <img class="self-start image_6" src="https://shops.cg500.com/static/iconjin.png" />
                          </div> -->
                          <span class="font_4 ml-8-5">消费红包￥{{ item.price }}</span>
                        </div>
                        <!-- <div class="flex-row items-center button_3" v-if="item.status == 1">
                          <span class="font_5 text_77">待领</span>
                          <img class="shrink-0 image_5 ml-29-5" src="https://shops.cg500.com/static/aijiu/arrow-rg-black.png" />
                        </div> -->
                        <div v-if="isDisableClick" class="flex-row items-center button_2">
                          <span class="font_5 text_4">领</span>
                          <img class="shrink-0 image_5 ml-29-5" src="https://shops.cg500.com/static/aijiu/arrow-rg-red.png" />
                        </div>
                        <div v-if="!isDisableClick" @click.stop="lingqu(item.id)" class="flex-row items-center button_2">
                          <span class="font_5 text_4">领</span>
                          <img class="shrink-0 image_5 ml-29-5" src="https://shops.cg500.com/static/aijiu/arrow-rg-red.png" />
                        </div>
                        <!-- <div class="flex-row items-center button_3" v-if="item.status == -1">
                          <span class="font_5 text_77">已领</span>
                          <img class="shrink-0 image_5 ml-29-5" src="https://shops.cg500.com/static/aijiu/arrow-rg-black.png" />
                        </div> -->
                      </div>
                    </van-checkbox>
                  </div>
                </van-checkbox-group>
              </div>
              <!-- 领取记录 -->
              <div v-if="currentTab == 1" class="flex-col justify-center section_9">
                <div v-for="(item, index) in recordList" :key="index" class="flex-row justify-between items-center record-list">
                  <div class="flex-row">
                    <img class="image_7" :src="item.user.avatar" />
                    <div class="flex-col justify-center items-start">
                      <div class="record-list-title">{{ item.user.nickname }}</div>
                      <div class="record-list-time">{{ item.time }}</div>
                    </div>
                  </div>
                  <div class="record-list-money">+{{ item.price }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-row justify-between items-center section_10 mt-76-5" v-if="currentTab == 0 && hongbaoList.length > 0">
      <div class="flex-row">
        <img class="self-start image_6" v-if="isToggleAll == false" @click="checkAll" src="https://shops.cg500.com/static/aijiu/long-unchecked1@2x.png" />
        <img class="self-start image_6" v-if="isToggleAll == true" @click="toggleAll" src="https://shops.cg500.com/static/aijiu/long-checked-red@2x.png" />
        <span class="ml-10 font_4 text_6" v-if="isToggleAll == false" @click="checkAll">全选</span>
        <span class="ml-10 font_4 text_6" v-if="isToggleAll == true" @click="toggleAll">取消</span>
      </div>
      <div class="flex-col justify-start items-center button_6" v-if="!isDisableClickAll" @click="lingquAll"><span class="font text_5">领取</span></div>
      <div class="flex-col justify-start items-center button_6" v-if="isDisableClickAll"><span class="font text_5">领取</span></div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      isDisableClick: false,//单个领取红包防止重复点击
      isDisableClickAll: false,//多选领取红包防止重复点击
      isToggleAll: false,//是否全选 false全选 true反选
      result: [],//复选框选中
      currentTab: 0,//0红包列表 1领取记录
      tabsList: ["红包列表", "领取记录"],//tabs列表
      hongbaoList: [],//红包列表
      recordList: [],//领取纪录列表
      allPrice: 0,//领取综金额
      jinPrice: 0,//今日领取红包
    };
  },
  mounted() {
    let uid = localStorage.getItem("uid") ? localStorage.getItem("uid") : '';
    if(!uid){
      Toast("请先登录");
      this.$router.push({ path: "/login?i="+this.fun.getKeyByI() });
      return;
    }
    this.getData();
  },
  methods: {
    toBack(){
      this.$router.go(-1);
    },
    getData() {
      var _this = this;
      $http
        .get("Yingguang.hongbaolist", {
          uid: localStorage.getItem("uid") ? localStorage.getItem("uid") : localStorage.getItem("newUid")
        })
        .then(
          response => {
            console.log(response.data,'Yingguang.hongbaolist');
            _this.allPrice = response.data.all_price;
            _this.jinPrice = response.data.jin_price;
            _this.hongbaoList = response.data.wlq_list;
            _this.recordList = response.data.ylq_list;
          },
          response => {
            console.error(response);
          }
        );
    },
    changeTabs(index) {
      this.currentTab = index;
      this.getData();
    },
    checkAll() {
      const { checkboxGroup } = this.$refs;
      // this.$refs.checkboxGroup.toggleAll(true);
      // this.toggleAll = !this.toggleAll;
      checkboxGroup.toggleAll({
        checked: true,
        skipDisabled: true
      });
      this.isToggleAll = !this.isToggleAll;
      console.log(this.result, "this.result");
    },
    toggleAll() {
      // this.$refs.checkboxGroup.toggleAll();
      const { checkboxGroup } = this.$refs;
      checkboxGroup.toggleAll({
        skipDisabled: true
      });
      this.isToggleAll = !this.isToggleAll;
      console.log(this.result, "this.result1");
    },
    lingqu(id) {
      this.isDisableClick = true;
      console.log("领取");
      console.log(this.result, "this.result1");
      var _this = this;
      $http
        .get("Yingguang.lingqu", {
          ids: JSON.stringify([id])
        })
        .then(
          response => {
            
            console.log(response.data,'Yingguang.lingqu');
            if(response.data == 1) {
              Toast("领取成功");
              _this.getData();
            
            }else {
              Toast("领取失败");
            }
            _this.isDisableClick = false;
           
          },
          response => {
            console.error(response);
          }
        );
    },
    lingquAll(){
      console.log("lingquAll",this.result.length);
      if(this.result.length <= 0){
        Toast("请选择要领取的红包");
        return;
      }
      this.isDisableClickAll = true;
      console.log("领取");
      console.log(this.result, "this.result1",JSON.stringify(this.result));
      var _this = this;
      // return;
      $http
        .get("Yingguang.lingqu", {
          ids: JSON.stringify(this.result)
        })
        .then(
          response => {
            
            console.log(response.data,'Yingguang.lingqu');
            if(response.data == 1) {
              Toast("领取成功");
              _this.getData();
            
            }else {
              Toast("领取失败");
            }
            _this.isDisableClickAll = false;
           
          },
          response => {
            console.error(response);
          }
        );
    }
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
::v-deep .van-checkbox {
  overflow: auto;
  width: 100%;
}
::v-deep .van-checkbox__label {
  width: 90%;
}
@import "../../assets/css/commoncss/common.css";
.mt-130-5 {
  margin-top: 8.16rem;
}
.mt-135 {
  margin-top: 8.44rem;
}
.mt-17 {
  margin-top: 1.06rem;
}
.mt-7-5 {
  margin-top: 0.47rem;
}
.ml-29-5 {
  margin-left: 1.84rem;
}
.mt-76-5 {
  margin-top: 4.78rem;
}
.ml-8-5 {
  margin-left: 0.53rem;
}
.page {
  background-color: #f5f5f5;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.group {
  //   height: 42rem;
  padding-bottom: 80px;
}
.group_2 {
  //   padding-bottom: 5.31rem;
}
.section {
  padding: 1.94rem 0.66rem 1.04rem;
  border-radius: 0rem 0rem 0rem 0.13rem;
  background-image: url("https://shops.cg500.com/static/ygb_offline_top_bg.png");
  background-size: 100% 250px;
  background-repeat: no-repeat;
}
.section_3 {
  padding: 0.44rem 0.84rem;
  background-color: #f5f6fae6;
  border-radius: 1rem;
  width: 5.47rem;
}
.image_3 {
  width: 1.94rem;
  height: 1.19rem;
}
.image_4 {
  width: 1.09rem;
  height: 1.09rem;
}
.font_3 {
  font-size: 0.81rem;
  font-family: PingFang SC;
  line-height: 0.78rem;
  color: #222222;
}
.text_3 {
  //   margin-right: 5.72rem;
  color: #151515;
  line-height: 0.75rem;
}
.section_2 {
  padding: 0 0.63rem 0;
}
.pos {
  position: absolute;
  left: 0;
  top: 0;
}
.image_2 {
  width: 0.63rem;
  height: 1.09rem;
}
.group_5 {
  //   padding: 0 1.09rem;
}
.font {
  font-size: 1.13rem;
  font-family: PingFang SC;
  line-height: 1.06rem;
  font-weight: 500;
}
.text_2 {
  color: #151515;
  font-weight: unset;
}
.section_5 {
  margin-right: 0.75rem;
  background-color: #5de18b;
  border-radius: 0.22rem;
  width: 3.06rem;
  height: 0.44rem;
}
.equal-division {
  //   position: absolute;
  //   left: 0;
  //   right: 0;
  //   top: 6.75rem;
}
.group_3 {
  padding: 2rem 0.16rem 1rem;
}
.group_4 {
  flex: 1 1 11.56rem;
}
.equal-division-item {
  padding: 0.66rem 0 0.31rem;
}
.font_2 {
  font-size: 2.75rem;
  font-family: PingFang SC;
  line-height: 2.09rem;
  font-weight: 700;
  color: #2c2554;
}
.horiz-divider {
  margin: 0.31rem 0 0.94rem;
}
.section_4 {
  background-color: #acb2d154;
  width: 0.031rem;
  height: 3.66rem;
}
.image {
  width: 20.47rem;
  height: 0.75rem;
}
.pos_2 {
  position: absolute;
  right: 1.09rem;
  top: 1.03rem;
}
.text {
  color: #222222;
}
.pos_3 {
  position: absolute;
  left: 50%;
  top: 3.28rem;
  transform: translateX(-50%);
}
.section_6 {
  padding: 1.22rem 0.5rem 0.19rem;
  background-color: #ffffff;
  border-radius: 0.5rem;
}
.pos_4 {
  position: absolute;
  left: 0.94rem;
  right: 0.94rem;
  top: 15.13rem;
}
.group_6 {
  margin-top: 0.56rem;
}
.group_7 {
  padding-left: 0.13rem;
}
.section_8 {
  background-color: #ffffff;
  border-radius: 0.5rem;
  width: 1.06rem;
  height: 1.06rem;
  border-left: solid 0.031rem #bbbbbb;
  border-right: solid 0.031rem #bbbbbb;
  border-top: solid 0.031rem #bbbbbb;
  border-bottom: solid 0.031rem #bbbbbb;
}
.image_6 {
  width: 1.06rem;
  height: 1.06rem;
}
.image_7 {
  width: 3.38rem;
  height: 3.38rem;
  border-radius: 50%;
  margin-right: 10px;
}
.button {
  margin-right: 0.13rem;
}
.font_5 {
  font-size: 1rem;
  font-family: PangMenZhengDaoBiaoTiTiMianFeiBan-4;
  line-height: 0.72rem;
  color: #ffffff;
}
.text_4 {
  margin-left: 1.22rem;
  text-shadow: 0rem -0.063rem 0.063rem #e61d1161;
}
.text_77 {
  margin-left: 1.22rem;
  color: #5d5d5d;
}
.image_5 {
  width: 0.28rem;
  height: 0.5rem;
}
.section_9 {
  margin: 1.14rem 0;
  padding: 1.22rem 0.63rem 1.13rem;
  background-color: #ffffff;
  border-radius: 0.5rem;
  width: 100%;
}
.view {
  margin: -2.34rem 0.94rem 0;
}
.button_2 {
  padding: 0.75rem;
  border-radius: 1.13rem;
  background-image: url("https://shops.cg500.com/static/aijiu/long-ling-bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 2.28rem;
}
.button_3 {
  padding: 0.75rem;
  border-radius: 1.13rem;
  background-image: url("https://shops.cg500.com/static/aijiu/long-ling-gray.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 2.28rem;
}
.section_10 {
  padding-left: 1.56rem;
  background-color: #ffffff;
  box-shadow: 0rem 0rem 0.73rem 0.11rem #e8e8e857;
  border-radius: 0.5rem 0.5rem 0rem 0rem;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
.font_4 {
  font-size: 1rem;
  font-family: PingFang SC;
  line-height: 0.97rem;
  color: #222222;
}
.text_6 {
  margin-bottom: 0.094rem;
  color: #999999;
}
.button_6 {
  padding: 1.5rem 0;
  background-image: linear-gradient(0deg, #fb4232 0%, #f95b41 100%);
  border-radius: 0rem 0.5rem 0rem 0rem;
  width: 8.38rem;
  height: 4rem;
}
.text_5 {
  color: #ffffff;
}
.active {
  position: relative;
}
.active::after {
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  content: "";
  background-color: #5de18b;
  border-radius: 0.22rem;
  width: 3.06rem;
  height: 0.44rem;
}
.record-list {
  padding: 0 10px;
  margin-bottom: 20px;
}
.record-list-title {
  font-size: 0.88rem;
  font-family: PingFang SC;
  line-height: 0.81rem;
  font-weight: 500;
  color: #151515;
}
.record-list-time {
  font-size: 0.88rem;
  font-family: PingFang SC;
  line-height: 0.69rem;
  color: #999999;
  margin-top: 0.72rem;
}
.record-list-money {
  font-size: 1.13rem;
  font-family: PingFang SC;
  line-height: 0.88rem;
  font-weight: 700;
  color: #e73328;
}
</style>
